<!--
 * @Author: wwssaabb
 * @Date: 2021-09-07 15:39:32
 * @LastEditTime: 2021-09-16 15:25:12
 * @FilePath: \gshop-client\src\Views\Home.vue
-->
<template>
  <div class="navbar">
    <NavBar :title="title" color="#fff" left-text="搜索">
      <template #left><Icon name="search" color="#fff" size="20" /></template>
      <template v-slot:right>
        <span @click="login">登录</span>|<span @click="register">注册</span>
      </template>
    </NavBar>
  </div>
  <div class="home">
    <Swipe class="home-swiper">
      <SwipeItem class="swiper-content">
        <div
          class="swiper-item"
          v-for="item in icons.slice(0, 8)"
          :key="item.id"
        >
          <img v-lazy="item.src" alt /><span>{{ item.name }}</span>
        </div>
      </SwipeItem>
      <SwipeItem class="swiper-content">
        <div class="swiper-item" v-for="item in icons.slice(8)" :key="item.id">
          <img v-lazy="item.src" alt /><span>{{ item.name }}</span>
        </div>
      </SwipeItem>
    </Swipe>
    <div class="nearby-shops-list">
      <div class="list-title">
        <Icon name="wap-nav" />
        <span>附近商家</span>
      </div>
      <Shops v-for="shop in list" :key="shop.id" :info="shop"></Shops>
    </div>
  </div>
  <div class="tabbar">
    <Tabbar :active="0"></Tabbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { icon } from "../types";
import { Swipe, SwipeItem, Icon } from "vant";
import NavBar from "../components/Navbar.vue";
import Shops from "../components/Shops.vue";
import Tabbar from "../components/Tabbar.vue";
import { reqCurrentCityName } from "../api/index";
import { AxiosResponse } from "axios";
import { useRouter } from "vue-router";
//实例router
const router = useRouter();
const icons: icon[] = [
  {
    id: 0,
    name: "川湘菜",
    src: "https://fuss10.elemecdn.com/9/7c/9700836a33e05c2410bda8da59117jpeg.jpeg",
  },
  {
    id: 1,
    name: "麻辣烫",
    src: "https://fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg",
  },
  {
    id: 2,
    name: "包子粥店",
    src: "https://fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg",
  },
  {
    id: 3,
    name: "鲜花蛋糕",
    src: "https://fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg",
  },
  {
    id: 4,
    name: "日韩料理",
    src: "https://fuss10.elemecdn.com/6/1a/1e0f448be0624c62db416e864d2afjpeg.jpeg",
  },
  {
    id: 5,
    name: "果蔬生鲜",
    src: "https://fuss10.elemecdn.com/4/34/ea0d51c9608310cf41faa5de6b8efjpeg.jpeg",
  },
  {
    id: 6,
    name: "汉堡薯条",
    src: "https://fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg",
  },
  {
    id: 7,
    name: "披萨意面",
    src: "https://fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg",
  },
  {
    id: 8,
    name: "甜品饮品",
    src: "https://fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg",
  },
  {
    id: 9,
    name: "商超便利",
    src: "https://fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg",
  },
  {
    id: 10,
    name: "美食",
    src: "https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg",
  },
  {
    id: 11,
    name: "简餐",
    src: "https://fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg",
  },
  {
    id: 12,
    name: "新店特惠",
    src: "https://fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg",
  },
  {
    id: 13,
    name: "准时达",
    src: "https://fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg",
  },
  {
    id: 14,
    name: "预订早餐",
    src: "https://fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
  },
  {
    id: 15,
    name: "土豪推荐",
    src: "https://fuss10.elemecdn.com/e/7e/02b72b5e63c127d5bfae57b8e4ab1jpeg.jpeg",
  },
];

const title = ref("加载中...");
onMounted((): void => {
  console.log("onMounted");
  reqCurrentCityName().then((res: AxiosResponse): void => {
    console.log(res.data.province + res.data.city);
    title.value = res.data.province + res.data.city;
  });
});
//附近商家列表业务代码
const list = ref([
  {
    id: 1,
    imgSrc:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fbainuo%2Fcrop%3D0%2C0%2C720%2C436%3Bw%3D720%3Bq%3D79%2Fsign%3D2ead28c70f24ab18f459bb7708cacafd%2F2fdda3cc7cd98d107d22c1d0273fb80e7aec9059.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633683099&t=3b8c10e07f76018abbbeb2dd0d08fdd2",
    isBrand: true,
    title: "嘉禾一品（温都水城）",
    score: 4.7,
    month_sales: 689,
    dispatch_limit: 20,
    dispatch_number: 5,
    tags: ["保", "准", "票"],
    take_out: "哇哇专送",
  },
  {
    id: 2,
    imgSrc:
      "https://img1.baidu.com/it/u=3065331963,2899994600&fm=26&fmt=auto&gp=0.jpg",
    isBrand: true,
    title: "波客派（楼村店）",
    score: 4.3,
    month_sales: 1960,
    dispatch_limit: 20,
    dispatch_number: 5,
    tags: ["保", "准", "票"],
    take_out: "哇哇专送",
  },
  {
    id: 3,
    imgSrc:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhiphotos.baidu.com%2Fnuomi%2Fpic%2Fitem%2F77c6a7efce1b9d167bbc539cffdeb48f8d5464d0.jpg&refer=http%3A%2F%2Fhiphotos.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633685852&t=1821768f8e916ba199550556334ddd1c",
    isBrand: true,
    title: "华莱士·全鸡汉堡（楼村店）",
    score: 4.2,
    month_sales: 2326,
    dispatch_limit: 15,
    dispatch_number: 5,
    tags: ["保", "准", "票"],
    take_out: "哇哇专送",
  },
  {
    id: 4,
    imgSrc:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphotocdn.sohu.com%2F20160309%2Fmp62548241_1457469129375_4.jpeg&refer=http%3A%2F%2Fphotocdn.sohu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633686854&t=2b6fc19ef95900d127db15fa00e9ff66",
    isBrand: true,
    title: "肯德基（楼村店）",
    score: 4.8,
    month_sales: 5677,
    dispatch_limit: 25,
    dispatch_number: 8,
    tags: ["保", "准", "票"],
    take_out: "哇哇专送",
  },
  {
    id: 5,
    imgSrc:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.zhms.cn%2F2018031516030818855.jpg%3Fx-oss-process%3Dimage%2Fformat%2Cjpg%2Finterlace%2C1%2Fwatermark%2Cimage_RGVmYXVsdC9iLnBuZw%3D%3D%2Ct_35%2Cg_se%2Cx_10%2Cy_10&refer=http%3A%2F%2Fimage.zhms.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633686955&t=0f2014df1c7921a3b92cb6077b8ff3d4",
    isBrand: true,
    title: "德克士（楼村店）",
    score: 4.6,
    month_sales: 3968,
    dispatch_limit: 20,
    dispatch_number: 8,
    tags: ["保", "准", "票"],
    take_out: "哇哇专送",
  },
]);
//登录事件
const login = (): void => {
  router.push("/login");
};
//注册事件
const register = (): void => {
  router.push("/register");
};
</script>

<style lang="scss" scoped>
.navbar {
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .van-nav-bar {
    width: 100%;
    color: #fff;
  }
}
.home {
  width: 100%;
  height: calc(100vh - 95px);
  overflow-y: auto;

  .home-swiper {
    height: 180px;
    border-bottom: 1px solid #eee;
    .swiper-content {
      height: 160px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .swiper-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 50px;
          height: 50px;
          margin-bottom: 5px;
        }

        span {
          color: #333;
        }
      }
    }
  }
  .nearby-shops-list {
    .list-title {
      padding: 10px 10px 0 10px;
      span {
        color: #888;
        margin-left: 5px;
      }
    }
  }
}
</style>
